<template>
    <el-dialog v-model="dialogVisible" :align-center="true" title="SKU分类信息" width="600px" @close="handleClose">
        <el-table :data="tree" row-key="id" max-height="500">
            <el-table-column label="类型" align="left" prop="name" width="200"></el-table-column>
            <el-table-column label="CODE" align="left" prop="code" width="100"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="success" link @click.stop="controll(scope.row, 'CHOOSE')">选择</el-button>
                    <el-button size="small" type="primary" link @click.stop="controll(scope.row, 'ADD')">添加</el-button>
                    <el-button size="small" type="warning" link @click.stop="controll(scope.row, 'UPDATE')">修改</el-button>
                    <el-button size="small" type="danger" link @click.stop="deleteCategory(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="row" style="margin-top: 12px">
            <text style="font-size: small; width:100px">选择上级类目</text>
            <el-tree-select v-model="parentNode.id" placeholder="选择上级类目" 
                filterable check-strictly
                :render-after-expand="false"
                :data="tree"  
                :props="defalutProps"
                style="height: 26px;"/>
            <el-input v-model="current.name" placeholder="输入类目名称" style="height: 26px; margin-left: 12px;"></el-input>
            <el-button size="small" type="primary" style="margin-left:12px" @click="addCategory" v-if="controlType==='ADD'">添加</el-button>
            <el-button size="small" type="primary" style="margin-left:12px" @click="updateCategory" v-if="controlType==='UPDATE'">更新</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import CategoryApi from '@/api/category';
import { ElMessage } from 'element-plus';

const emit = defineEmits(["update:visible", "controll-success", "choose-success"])
const props = defineProps({
    visible: { type: Boolean, default: false },
    tree: { type: Array, default: [] }
})

let dialogVisible = computed({
    get: () => props.visible,
    set: (val) => {
        emit("update:visible", val);
    }
})

const defalutProps = {
  children: 'children',
  label: 'name',
  value: 'id'
}

let initForm = {
    name: "",
    id: 0,
    parentId: 0
}

let parentNode = ref(initForm)
let current = ref(initForm)
let controlType = "ADD"

function controll(item, type) {
    controlType = type
    if(type === "ADD") {
        parentNode.value = item
        current.value.parentId = item.id
    }
    if(type==="UPDATE"){
        parentNode.value = initForm
        current.value = item
    } 
    if(type==="CHOOSE"){
        current.value = item
        emit("choose-success", item)
    }
}

function deleteCategory(id) {
    CategoryApi.deleteById(id).then(res=>{
        ElMessage.success("删除成功")
        emit("controll-success", id)
        handleClose()
    })
}
function addCategory(){
    CategoryApi.add(current.value).then(res=>{
        ElMessage.success("添加成功")
        emit("controll-success", current.value)
        handleClose()
    })
}
function updateCategory(){
    CategoryApi.update(current.value).then(res=>{
        ElMessage.success("更新成功")
        handleClose()
        emit("controll-success", current.value)
    })
}

function resetData(){
    current.value = initForm
    parentNode.value = initForm
}
function handleClose() {
    resetData()
    dialogVisible.value = false
}
</script>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
}

.line {
    height: 100%;
    width: 1px;
    background-color: black;
}

.half-box {
    flex: 1;
    min-height: 200px;
    padding: 0 12px;
}
</style>